<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition template="/layout/adminTemplate.xhtml">

        <ui:define name="content">

            <h:form id="form" enctype="multipart/form-data" prependId="false">  
                <p:growl id="messages" showDetail="true" />  

                <p:schedule id="schedule" widgetVar="myschedule" value="#{gestorEventos.eventModel}" style="width: 80%; height: 80%">  
                    <p:ajax event="dateSelect" listener="#{gestorEventos.nuevoEvento}" update="dialog" oncomplete="PF('eventDialog').show()" />  
                    <p:ajax event="eventSelect" listener="#{gestorEventos.onEventSelect}" update="dialog" oncomplete="PF('eventDialog').show()" />
                </p:schedule>  

                <p:dialog widgetVar="eventDialog" id="dialog" header="Detalles del Evento" showEffect="clip" hideEffect="clip">  
                    <h:panelGrid id="eventDetails" columns="2">  
                        <h:outputLabel for="nombre" value="Titulo:"  />
                        <p:inputText id="nombre" value="#{gestorEventos.foro.nombre}"  style="width: 300px;" required="true" requiredMessage="El campo Título es obligatorio"/>
                        <h:outputLabel value="Imagen:"/>
                        <h:form>
                            <p:fileUpload
                                mode="advanced"
                                fileUploadListener="#{gestorEventos.upload}"
                                allowTypes="/(\.|\/)(gif|jpg|jpeg|gif|png|PNG|GIF|JPG|JPEG)$/" 
                                required="true"
                                auto="true"
                                update=":form:messages"
                                requiredMessage="Debe seleccionar una imagen para la noticia"
                                />
                        </h:form>
                        <h:outputLabel for="fechaInicio" value="Desde"/>  
                        <h:panelGrid columns="3">

                            <p:calendar id="fechaInicio" pattern="MM/dd/yyyy hh:mm a" value="#{gestorEventos.foro.fecha}"/> 
                            <h:outputLabel for="fechaFin" value="Hasta"/>
                            <p:calendar id="fechaFin" pattern="MM/dd/yyyy hh:mm a" value="#{gestorEventos.foro.fechafin}"/> 
                        </h:panelGrid>
                        <h:outputLabel for="privacidad" value="Privacidad:" />

                        <p:selectOneMenu id="privacidad" value="#{gestorEventos.foro.privacidad}" >
                            <f:selectItem itemLabel="Solo Escuela" itemValue="0" />  
                            <f:selectItem itemLabel="Abierto" itemValue="1" />     
                        </p:selectOneMenu>
                        <h:outputLabel value="Lugar" style="font-size: 15pt;"/>
                        <p:inputText value="#{gestorEventos.foro.lugar}"/>
                    </h:panelGrid>
                    <h:inputHidden id="lat" value="#{gestorEventos.foro.latitud}"/>  
                    <h:inputHidden id="lng" value="#{gestorEventos.foro.longitud}"/>
                    <br/>
                    <p:gmap id="gmap" center="#{gestorEventos.foro.latitud},#{gestorEventos.foro.longitud}" zoom="16" type="ROADMAP"   
                            style="width:500px;height:200px"  
                            model="#{gestorEventos.emptyModel}"
                            onPointClick="handlePointClick(event);"
                            widgetVar="map">
                    </p:gmap>
                    <h:outputLabel value="Descripción del evento" style="font-size: 15pt;"/>
                    <br/>
                    <p:inputTextarea style="width: 500px; height: 100px" id="editorEvento" value="#{gestorEventos.foro.descripcion}" />
                    <br/>
                    <br/>
                    <p:commandButton value="#{gestorEventos.nuevo?  'Publicar':'Guardar'}"  ajax="false" action="#{gestorEventos.guardarEvento}" update="messages schedule"/>
                    <p:commandButton value="Cancelar" ajax="false"/>
                    <p:commandButton value="Cancelar Evento"  ajax="false" style="visibility: #{gestorEventos.nuevo? 'hidden':'visible'}}" action="#{gestorEventos.cancelarEvento}" update="messages schedule">
                        <p:confirm header="Cancelar Evento" message="Esta seguro?" icon="ui-icon-alert" />
                    </p:commandButton>
                    <p:confirmDialog global="true" showEffect="fade" hideEffect="explode">  
                        <p:commandButton value="Si" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check"/>  
                        <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>       
                    </p:confirmDialog> 
                </p:dialog>  
            </h:form>
            <script type="text/javascript">
                var currentMarker = null;

                function handlePointClick(event) {
                    if (currentMarker !== null)
                        currentMarker.setMap(null);
                    currentMarker = null;
                    if (currentMarker === null) {
                        document.getElementById('lat').value = event.latLng.lat();
                        document.getElementById('lng').value = event.latLng.lng();
                        currentMarker = new google.maps.Marker({
                            position: new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())
                        });
                        PF('map').addOverlay(currentMarker);


                    }
                }
            </script>


        </ui:define>
    </ui:composition>
</html>

